<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <button id="btn">唐伯虎</button>
    <div>123</div>
    <button>当前系统时间</button>
    <div class="a">某个时间</div>
    <p>123</p>
    <script>
        // 点击按钮，弹出对话框
        // 事件三部分组成：事件源，事件类型，事件处理程序
        // (1)事件源 事件被触发的对象  按钮
        var btn = document.getElementById('btn');
        // (2)事件类型 比如鼠标点击（onclick）是鼠标经过，鼠标按下
        // (3)事件处理程序 通过函数赋值的方式完成
        btn.onclick = function() {
            alert('点秋香');
        }

        // 执行事件步骤
        // 点击div控制台输出 我被选中了
        // 1.获取事件源
        // 2.注册事件
        // 3.添加事件处理程序
        var ct = document.querySelector('div');
        ct.onclick = function() {
            console.log('我被选中');
        }

        // 操作元素
        // 当我们点击按钮，div里面的文字发生变化
        // 1.改变元素的内容
        // XXX.innerText 从起始位置到终止位置的内容，不识别html标签，同时换行和空格也会去掉
        var buttonT = document.querySelector('button'); //获取元素
        var divT = document.querySelector('.a'); //获取元素
        buttonT.onclick = function() {
            divT.innerText = getDate(); //添加事件处理程序
        }

        function getDate() {
            var date = new Date(); //创建date对象
            var year = date.getFullYear(); //获取年
            var month = date.getMonth() + 1; //获取月
            var dates = date.getDate(); //获取日
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay(); //获取星期
            return '今天是：' + year + '年' + month + '月' + date + '日' + arr[day];
        }

        // 页面刷新就显示事件
        var p = document.querySelector('p');
        p.innerText = getDate();

        // XXX.innerHTML 起始位置到终止位置，识别html标签，同时保留空格和换行 W3
        var div = document.querySelector('div');
        div.innerHTML = '今天心情好';
    </script>

</body>

</html>